<template>
  <div class="content">
    <div class="progress-bar-container">
      <div class="progress-bar" :style="{ width: progress + '%' }"></div>
    </div>
  </div>
</template>
 
<script>
// socket功能
import SockJS from "sockjs-client";
import Stomp from "stompjs";

export default {
  name: "ProgressBar",
  data() {
    return {
      progress: 40,
    };
  },
  mounted() {
    let socket = new SockJS("http://localhost:9000/websocket"); //连接SockJS的endpoint名称为"bullet"
    // 获取STOMP子协议的客户端对象
    let stompClient = Stomp.over(socket);

    // 向服务器发起websocket连接
    stompClient.connect({}, () => {
      stompClient.subscribe("/topic/messages", (response) => {
        console.log(response)
        this.messages.push(response.body);
      });
    });
  },
};
</script>
 
<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.progress-bar-container {
  width: 50%;
  background-color: #ddd;
  height: 20px;
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar {
  width: 0;
  height: 100%;
  background-color: #4caf50;
  transition: width 1s ease;
  border-radius: 5px;
}
</style>